<template>
  <div>
    <el-row style="margin-bottom: 20px;">
    </el-row>
    <el-row>
      <el-col >
        <el-card style="width:90%; height: 350px;">
          <div id="echarts1" ref="echarts1" :style="{width:'90%', height: '300px'}" style="float: left;"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="11" style="padding-top: 50px">
        <el-card style="width:580px; height: 350px;">
          <div id="echarts2" :style="{width:'500px', height: '300px'}" style="float: right;"></div>
        </el-card>
      </el-col>
      <el-col :span="11" style="padding-top: 50px">
        <el-card style="width:580px; height: 350px;">
          <div id="echarts3" :style="{width:'500px', height: '300px'}" style="float: left;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    import echarts from 'echarts'
    import request from '@/utils/request'

    export default {
        data() {
            return {
                isCollapsed: false,
                charts: '',
                monthsCnt: {},
                listQuery: { //表格查询对象
                    subjectId: null,
                    classId: null,
                    isTimeAnalysis: true,
                    timeAnalysis: true,
                    collegeId: null
                },
                subjects: [],
                classes: [],
                colleges: [],
                prefixUrl: this.GLOBAL.baseUrl + '/data'
            };
        },
        created() {
            this.initData()
        },
        methods: {
            //请求分析结果
            initData(row) {
                request({
                    url: `${this.GLOBAL.baseUrl}statistics/statistic`,
                    method: 'get'
                }).then(res => {
                    this.drawPie("echarts1", res['date'], "日咨询情况");
                    this.drawPie("echarts2", res['doc'], "医生接待情况");
                    this.drawPie("echarts3", res['patient'], "患者咨询情况");
                }).catch(error => {
                    this.$message({
                        message: error,
                        type: 'error',
                        duration: 1500,
                        onClose: () => {
                        }
                    })
                });
            },
            drawPie(id, data, title) {
                var xData = [];
                var yData = [];
                for (var i = 0; i < data.length; i++) {
                    xData.push(data[i].x);
                    yData.push(data[i].y);
                }
                this.charts = echarts.init(document.getElementById(id));
                this.charts.setOption({
                    title: {
                        text: title,
                        left: 'right'
                    },
                    xAxis: {
                        type: 'category',
                        data: xData
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    series: [
                        {
                            data: yData,
                            type: 'bar'
                        }
                    ]
                });
            },
        },
        //调用
        mounted() {
            this.$nextTick(function () {
                // this.drawPie()
            })
        },
        computed: {
            menuitemClasses: function () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        }
    }
</script>

<style scoped="scoped">
  .card-big-font {
    font-size: 36px;
    color: #666;
    line-height: 36px;
    padding: 5px 0 10px;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
    margin-bottom: 5px;
  }

  .card-span-color {
    position: absolute;
    right: 15px;
  }
</style>
